<template>
  <div class="goods">
    <div class="wrapper">
      <div class="menu" ref="menuWrapper">
        <ul>
          <li :class="{active: selectedIndex === index}" v-for="(good, index) in goods" @click="selectCategory(index, $event)">
            <div class="category">
              <i v-if="good.type != -1" class="icon" :style="'background-image: url(/static/images/' + good.type + '@2x.png'"></i>
              <span>{{good.name}} </span>
            </div>
          </li>
        </ul>
      </div>
      <div class="content" ref="foodWrapper">
        <ul>
        <li v-for="(cat, index) in goods" ref="categories">
          <h3 class="catName">{{cat.name}}</h3>
          <ul class="foods">
            <li class="food" v-for="food in cat.foods">
              <div class="image">
                <img :src="food.image">
              </div>
              <div class="info">
                <p class="name">{{food.name}}</p>
                <p class="desp">{{food.description}}</p>
                <p class="desp">月售{{food.sellCount}}&nbsp;&nbsp;好评{{food.rating}}</p>
                <p class="price">
                  <span class="now">{{formatCurrency(food.price)}}</span>
                  <span v-if="parseFloat(food.oldPrice).toString() !== 'NaN'" class="old">&nbsp;{{formatCurrency(food.oldPrice)}}&nbsp;</span>
                </p>
                <div class="buttons">
                  <cart-control :quantity="quantityOfFoodInCart(food.name)" @increase="increase( food.name, $event )" @decrease="removeFromCart(food.name)"></cart-control>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      </div>
    </div>
    <shop-cart class="shopCart" ref="cart" :count = 'countOfItemInCart' :cost = 'costOfItemInCart' :peisong="peisong" @click="shopCartClicked"></shop-cart>
    <transition name = "mask">
      <div class="mask" v-show="show"></div>
    </transition>
  </div>
</template>

<script>
    import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
    import BScroll from 'better-scroll'
    import cartControl from './cartControl'
    import shopCart from './shopCart'
    export default {
      components: {
        'cart-control' : cartControl,
        'shop-cart': shopCart
      },
      data:function () {
          return {
            selectedIndex: 0,
            show: false
          }
      },
      computed: {
        ...mapGetters(['goods','countOfItemInCart', 'costOfItemInCart', 'quantityOfFoodInCart', 'itemsInCart']),
        peisong: function () {
          if(this.costOfItemInCart <= 0) {
            return "20元起免费配送"
          } else if (this.costOfItemInCart < 20){
            return "还差"+(20 - this.costOfItemInCart)+"元免费配送"
          }else{
            return "免费配送"
          }
        }
      },
      methods: {
        ...mapActions(['addToCart','removeFromCart']),
        initialScroll: function () {
          this.menuScroller = new BScroll(this.$refs.menuWrapper, {click: true})
          this.foodScroller = new BScroll(this.$refs.foodWrapper, {click: true, probeType: 3})

          this.heights = [];
          let total = 0;
          for(let i = 0; i < this.$refs.categories.length; i++){
            let el = this.$refs.categories[i]
            total += el.clientHeight
            this.heights.push(total)
          }
       //   console.log(this.heights)

          let vm = this;
          this.foodScroller.on('scroll', function (pos) {
            //console.log(pos)
            for(let index = 0; index < vm.heights.length; index++){
              if(-pos.y < vm.heights[index]){
                if(vm.selectedIndex != index) {
                  vm.selectedIndex = index
                  //console.log('selectedIndex = ' + index)
                }
                break
              }
            }
          })
        },
        selectCategory: function (index, event) {
//          console.log("clicked index #" + index + " _constructed: " + event._constructed)
          this.selectedIndex = index

          this.foodScroller.scrollTo(0, index <= 0 ? 0 : -this.heights[index-1], 300)
        },
        increase: function (foodName, event) {
          this.addToCart(foodName)
          this.$refs.cart.drop(event.target)
        },
        shopCartClicked: function (show) {
          this.show = show
          console.log(this.show)
        }
      },
      mounted: function () {
        let vm = this;
        this.$nextTick(function () {
          vm.initialScroll();
        })
      }
    }
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixin.scss";

  .goods{
    height: 100%;
    display: flex;
    flex-direction: column;

    .wrapper{
      flex: 1;
      display: flex;
      background: #f3f5f7;

      .menu{
        flex-basis: 80px;
        overflow-y: auto;

        ul{

          li {
            position: relative;
            padding: 0 12px;

            .category {
              display: table-cell;
              vertical-align: middle;
              height: 56px;

              line-height: 1.5;

              .icon{
                display: inline-block;
                width: 18px;
                height: 18px;
                background-size:12px 12px;
                background-repeat:no-repeat;
                background-position: center;
                white-space: nowrap;
                letter-spacing: -1em;
                text-indent: -99em;
                font-size: 12px;
              }
              .icon:before{
                /* 伪元素插入空格文本 */
                content: '\3000';
              }
              span {
                font-size: 12px;
              }
            }


          }

          li:after{
            content: '';
            display: block;
            border-bottom: 1px solid rgba(7, 17, 27, 0.1);
          }

          li.active{
            background-color: #fff;
            margin-top: -1px;

            &:after{
              display: none;
            }
          }
        }
      }

      .content{
        flex: 1;
        overflow: hidden;

        .catName{
          font-size: 12px;
          padding-left: 14px;
          line-height: 26px;
          color: #93999f;

          border-left: 2px solid #d9dde1;
        }
        .foods{
          background-color: #fff;
          padding: 0 20px;


          .food {
            display: flex;
            padding: 18px 0;
            /*border-top: 1px solid rgba(7,17,27,0.1);*/
            @include border-1px(rgba(7,17,27,0.1));

            .image {
              flex-basis: 57px;
              width: 57px;
              margin-right: 10px;

              img {
                width: 100%;
                height: auto;
              }
            }
            .info {
              position: relative;
              flex: 1;
              line-height: 1;

              .name{
                font-size: 14px;
                line-height: 14px;
                margin: 2px 0 8px 0;
              }
              .desp{
                font-size: 10px;
                color: #93999f;
                margin-bottom: 8px;
              }
              .price{
                .now {
                  display: inline-block;
                  margin-right: 10px;
                  font-size: 14px;
                  color: #f01414;
                }
                .old {
                  display: inline-block;
                  font-size: 12px;
                  color: #93999f;
                  text-decoration: line-through;
                }

              }
              .buttons{
                position: absolute;
                bottom: 0;
                right: 0;
              }
            }

            &:last-child{
              @include border-none();
            }
          }

        }
      }
    }

    .shopCart{
      z-index: 50;
    }
    .mask{
      z-index: 20;

      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;

      opacity: 1;
      background: rgba(7,17,27,0.6);

      backdrop-filter: blur(2px);
    }
    .mask-enter-active, .mask-leave-active {
      transition: all .6s linear;
    }
    .mask-enter, .mask-leave-active {
      opacity: 0;
    }
  }
</style>
